<template name="accountProfile">
  {{#if doesUserExist}}
    <div class="flex flex-column flex-align-center flex-2x container-lg">
      <div class="flex-item">
        <div class="panel panel-lg">
          <div class="panel-heading panel-title-center">
            <div class="profile-image">
              <div>
                {{> React ReactionAvatar }}
              </div>
              <span class="profile-image-display-name">{{displayName}}</span>
              <span class="profile-image-email">{{displayEmail}}</span>
            </div>
          </div>
          {{#if isOwnerOfProfile}}
            <div class="panel-content">
              {{> React UpdateEmail }}
            </div>
            <div class="panel-content">
              {{> loginFormChangePassword}}
            </div>
          {{/if}}
        </div>
      </div>

      {{#if isOwnerOfProfile}}
        {{#if showMerchantSignup}}
          <div class="flex-item">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title" data-i18n="marketplace.becomeSeller">Become a Seller</h3>
              </div>
              <div class="panel-content">
                {{> becomeSellerButton}}
              </div>
            </div>
          </div>
        {{/if}}
      {{/if}}
    </div>
  {{else}}
    <div class="empty-view-message">
      <i class="fa fa-user-times"></i>
      <p data-i18n="accountsUI.oops">Oops!</p>
      <p data-i18n="accountsUI.nonExistentAccount">The user you're looking for does not exist.</p>
    </div>
  {{/if}}
</template>
